<template>
    <view class='page'>
        <u-navbar class="gradient-bg" :title="title" navbarType="0" fontColor="#ffffff" gradient="linear-gradient(to bottom right, #2e996f, #3f99ab)"></u-navbar>
        <view class="box form">
            <view class="evan-form-show">
                <evan-form :hide-required-asterisk="hideRequiredAsterisk" ref="form" :model="form" :rules="rules">
                    <evan-form-item label="规格名" prop="service_spec">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.service_spec" placeholder="请输入规格名" />
                    </evan-form-item>
                    <evan-form-item label="现价（元）" prop="current_price">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.current_price" placeholder="请输入现价（元）" type="number"
                            @input="handPrice('current_price', $event)" />
                    </evan-form-item>
                    <evan-form-item label="原价（元）" prop="original_price">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.original_price" placeholder="请输入原价（元）"
                            type="number" @input="handPrice('original_price', $event)" />
                    </evan-form-item>
                    <evan-form-item label="单位" prop="unit">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.unit" placeholder="请输入单位" />
                    </evan-form-item>
                    <evan-form-item label="服务时长（分钟）" prop="service_duration">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.service_duration" placeholder="请输入服务时长（分钟）"
                            type="number" @input="handNum('service_duration', $event)" />
                    </evan-form-item>
                    <evan-form-item label="虚拟销量（个）" prop="virtual_sales">
                        <input class="form-input" placeholder-class="form-input-placeholder" v-model="form.virtual_sales" placeholder="请输入虚拟销量（个）"
                            type="number" @input="handNum('virtual_sales', $event)" />
                    </evan-form-item>
                    <evan-form-item label="是否可显示" prop="status" class="fw">
                        <view></view>
                        <radio-group class="block" v-model="form.status">
                            <label v-for="item,index in yesNo" :key="index" @click="radioChange(item.value)">
                                <radio :checked="radio==item.value" :value="item.value" color="#2d996c;">
                                </radio>
                                <text class="p">
                                    {{item.value }}
                                </text>
                            </label>
                        </radio-group>
                    </evan-form-item>
                </evan-form>
            </view>
            <view class="btn">
                <u-button type="success" @click="submit()">添加</u-button>
            </view>
        </view>
    </view>

</template>

<script>

export default {
    components: {},
    data() {
        return {
            title: '服务规格',
            form: {
                service_sku: '',
                service_spec: '',
                current_price: '',
                original_price: '',
                unit: '',
                service_duration: '',
                virtual_sales: '',
                status: "",
                checked: false,
            },
            rules: {
                service_spec: [{
                    required: true,
                    message: '请输入规格名'
                }
                ],
                current_price: {
                    required: true,
                    message: '请输入现价（元）'
                },
                original_price: {
                    required: true,
                    message: '请输入原价（元）'
                },
                unit: {
                    required: true,
                    message: '请输入单位'
                },
                service_duration: {
                    required: true,
                    message: '请输入服务时长（分钟）'
                },
                virtual_sales: {
                    required: true,
                    message: '请输入虚拟销量（个）'
                },
            },
            yesNo: [{
                value: '是',
                checked: false
            }, {
                value: '否',
                checked: false
            }],
            radio: '是'
        };
    },
    onLoad(query) {
        if (query) {
            this.form = JSON.parse(decodeURIComponent(query.dataList))
        }
    },
    mounted() {
        this.$refs.form.setRules(this.rules)
    },
    methods: {
        handNum(field, e) {
            const v = e.detail.value;
            this.form[field] = '1'
            const zero = /[^0-9]/g;
            let final = 0;
            if (!v) {
                final = '';
            } else {
                final = v.toString().replace(zero, (v) => {
                    return '';
                });
                if (final.split('')[0] * 1 === 0 && final.length > 1) {
                    final = final.slice(1);
                }
            }
            this.$nextTick(() => {
                this.form[field] = final.toString() || '';
            });
        },
        handPrice(field, e) {
            let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
            if (!val) {
                this.val = '';
                return
            }
            var reg = /[^\d.]/g
            val = val.replace(reg, "")
            val = val.replace(/^\./g, "");
            val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            this.$nextTick(() => {
                this.form[field] = val;
            })
        },
        radioChange(name) {
            this.radio = name
            this.form.status = this.radio == '是' ? 1 : 0
        },
        submit() {
            this.$refs.form.validate((val) => {
                if (val) {
                    this.form.status = this.radio == '是' ? 1 : 0
                    this.$bus.$emit('updateTabList', this.form);
                    uni.navigateBack();
                }
            })
        }
    },
};
</script>
<style scoped lang='scss'>
.page {
  .form {
    background: #ffffff;
    .evan-form-show {
      padding: 0 20rpx 20rpx;
      .form-input {
        font-size: 28rpx;
        color: #333;
        // text-align: right;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        height: 100rpx;
        line-height: 50rpx;
        // text-indent: 36rpx;

        &.textarea {
          height: 240rpx;
          padding: 24rpx 0;
          text-align: left;
        }
      }

      .form-input-placeholder {
        font-size: 28rpx;
        color: #999;
      }

      &__button {
        width: 100%;
        height: 88rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 36rpx;
        color: #fff;
        margin-top: 20rpx;
        background-color: #2d87d5;

        &::before,
        &::after {
          border: none;
        }
      }

      .customize-form-item {
        &__label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
        }

        &__radio {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          &__text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
    /deep/.evan-form-item-container__label {
      font-size: 28rpx;
      color: #333333;
      width: 180rpx;
      text-align: justify;
      text-align-last: justify;
      padding-right: 36rpx;
      line-height: 50rpx;
    }
    .more {
      /deep/.evan-form-item-container__label {
        width: 260rpx;
      }
    }
    .fw {
      //   /deep/.evan-form-item-container__label {
      //     width: 360rpx;
      //   }
      /deep/.evan-form-item-container__main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        label {
          margin-left: 20rpx;
          text {
            padding-left: 20rpx;
            line-height: 90rpx;
          }
        }
      }
    }

    .btn {
      margin-top: 30rpx;
    }
  }
}
</style>